<template>
    <!-- 主页 -->
    <div class="home">
        <div class="block">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" height="20px">
                <van-swipe-item v-for="item in banner" :key="item.id">
                    <img :src="item.imgUrl" :alt="item.imgUrl">
                </van-swipe-item>
            </van-swipe>
        </div>

        <van-search v-model="value" placeholder="请输入搜索关键词" />

        <nav>
            <h5>功能导航</h5>
            <ul>
                <li><router-link to="/category">
                        <van-icon name="records" />
                        <p>在线考试</p>
                    </router-link></li>
                <li><router-link to="/grades">
                        <van-icon name="award" />
                        <p>我的成绩</p>
                    </router-link></li>
                <li><router-link to="">
                        <van-icon name="add" />
                        <p>创建试卷</p>
                    </router-link></li>
                <li><router-link to="">
                        <van-icon name="friends" />
                        <p>企业真题</p>
                    </router-link></li>
            </ul>
        </nav>

        <section>
            <h5>编程面试题</h5>
            <div class="content">
                <van-collapse v-model="activeNames">
                    <van-collapse-item title="前端" name="1">
                        <ul>
                            <router-link :to="{ path: '/questions', query: { hid: item.hid } }"
                                v-for="(item, index) in program[0].list" :key="index" tag="li">{{ item.text }}
                                <p>题数量：{{ item.count }}</p>
                            </router-link>
                        </ul>
                    </van-collapse-item>
                    <van-collapse-item title="PHP" name="2">
                        <ul>
                            <li v-for="(item, index) in program[1].list" :key="index">{{ item.text }}
                                <p>题数量：{{ item.count }}</p>
                            </li>
                        </ul>
                    </van-collapse-item>
                    <van-collapse-item title="Java" name="3">
                        <ul>
                            <li v-for="(item, index) in program[2].list" :key="index">{{ item.text }}
                                <p>题数量：{{ item.count }}</p>
                            </li>
                        </ul>
                    </van-collapse-item>
                    <van-collapse-item title="鸿蒙开发" name="4">
                        <ul>
                            <li v-for="(item, index) in program[4].list" :key="index">{{ item.text }}
                                <p>题数量：{{ item.count }}</p>
                            </li>
                        </ul>
                    </van-collapse-item>
                </van-collapse>

            </div>
        </section>


        <router-view></router-view>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const banner = ref<any>([{ id: 1, imgUrl: "https://img2.baidu.com/it/u=3057994961,2152693481&fm=253&fmt=auto&app=138&f=JPEG?w=859&h=800" },
{ id: 2, imgUrl: "https://img2.baidu.com/it/u=1339196564,2308199360&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" },
{ id: 3, imgUrl: "https://img0.baidu.com/it/u=2628908023,2643323256&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=300" },])
const program = ref([
    {
        pid: 1,
        name: '前端',
        list: [
            { hid: 1, text: "HTML/CSS", count: 50 },
            { hid: 2, text: "JavaScript", count: 45 },
            { hid: 3, text: "jQuery", count: 30 },
            { hid: 4, text: "Vue.js", count: 25 },
            { hid: 5, text: "React.js", count: 20 },
            { hid: 6, text: "Node.js", count: 15 },
            { hid: 7, text: "TypeScript", count: 10 },
        ]
    },
    {
        pid: 2,
        name: 'PHP',
        list: [
            { pid: 1, text: "PHP基础", count: 82 },
            { pid: 2, text: "PHP框架", count: 75 },
            { pid: 3, text: "PHP扩展", count: 68 },
            { pid: 4, text: "PHP优化", count: 61 },
            { pid: 5, text: "PHP安全", count: 54 },
            { pid: 6, text: "PHP性能", count: 47 },
            { pid: 7, text: "PHP数据库", count: 40 },
        ]
    },
    {
        pid: 3,
        name: 'Java',
        list: [
            { jid: 1, text: "Java基础", count: 82 },
            { jid: 2, text: "Java集合", count: 75 },
            { jid: 3, text: "Java多线程", count: 68 },
            { jid: 4, text: "Java网络", count: 61 },
            { jid: 5, text: "JavaIO", count: 54 },
            { jid: 6, text: "Java反射", count: 47 },
            { jid: 7, text: "Java设计模式", count: 40 },
        ]
    },
    {
        pid: 4,
        name: 'C++',
        list: [
            { cid: 1, text: "C++基础", count: 82 },
            { cid: 2, text: "C++模板", count: 75 },
            { cid: 3, text: "C++指针", count: 68 },
            { cid: 4, text: "C++内存管理", count: 61 },
            { cid: 5, text: "C++异常处理", count: 54 },
            { cid: 6, text: "C++网络编程", count: 47 },
            { cid: 7, text: "C++设计模式", count: 40 },
        ]
    },
    {
        pid: 5,
        name: '鸿蒙开发',
        list: [
            { mid: 1, text: "鸿蒙开发基础", count: 82 },
            { mid: 2, text: "鸿蒙开发组件", count: 75 },
            { mid: 3, text: "鸿蒙开发框架", count: 68 },
            { mid: 4, text: "鸿蒙开发性能", count: 61 },
            { mid: 5, text: "鸿蒙开发安全", count: 54 },
            { mid: 6, text: "鸿蒙开发调试", count: 47 },
            { mid: 7, text: "鸿蒙开发IDE", count: 40 },
        ]
    },
])
const activeNames = ref([])
const value = ref('')

</script>

<style lang="less" scoped>
@import '../static/less/variable.less';

.home {
    margin-bottom: 65px;

    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
    }

    nav {
        margin-top: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
        padding: @pad;

        h5 {
            font-size: 20px;
            color: @bgColor;
        }

        ul {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            padding: @pad;
            padding-top: 5px;
            padding-bottom: 10px;

            li {
                padding: 5px 0;
                font-size: 15px;
                color: @bgColor;
                text-align: center;
                margin: 5px;
                border-radius: 5px;
                padding: 5px 20px;
                background: linear-gradient(90deg, #aabf5d, @bgColor);

                i {
                    font-size: 40px;
                }
            }

        }
    }

    section {
        margin-top: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
        padding: @pad;

        h5 {
            font-size: 20px;
            color: @bgColor;
        }

        .content {
            padding: @pad;
            margin-top: 10px;

            ul {
                width: 100%;
                // background-color: #39a9ed;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: space-between;

                li,
                a {
                    flex-shrink: 1;
                    text-align: center;
                    padding: 5px 5px;
                    margin: 5px 0;
                    background-color: @bgColor;
                    color: #000;
                }
            }
        }
    }
}

img {
    width: 100%;
    height: 250px;
}
</style>